/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'mixins';
@import '../DropDown/mixins';
@import '../Terminal/mixins';
@import '../common/narrow-window';

$font-size: 0.75rem;

$element-padding: 1rem;

/* see https://github.com/IBM/kui/issues/6880 */
$z-index: var(--pf-global--ZIndex--xs);

@include StatusStripeWhenDisplayingGuidebook {
  color: $fg-type-blue;
  background-color: $bg-type-blue;
  @include StatusStripeElement {
    color: $fg-type-blue;
  }
  @include StatusStripeElementHiddenInGuidebook {
    display: none;
  }
}

@include StatusStripe {
  display: flex;
  flex-basis: 2.25rem;
  background-color: $bg-type-default;
  color: $fg-type-default;

  &[data-type='yellow'] {
    background-color: $bg-type-yellow;
  }
  &[data-type='red'] {
    background-color: $bg-type-red;
  }

  /* markdown */
  p {
    margin: 0;
    letter-spacing: 0.16px;
    code {
      font-family: var(--font-sans-serif);
      color: var(--color-base01);
    }
  }

  z-index: $z-index;
  box-shadow: 0 -1px 1px var(--color-base05);

  .kui--status-stripe-element a.clickable,
  .kui--status-stripe-icon > div {
    /* wrappers around clickable svgs */
    display: flex;
    align-items: center;
  }

  @include StatusStripeElement {
    color: currentColor;
    font-size: $font-size;
    svg {
      fill: currentColor;
    }

    &[data-view='obscured'] {
      color: var(--color-text-02);
    }
    &[data-view='obscured'] svg {
      fill: var(--color-text-02);
    }
    &[data-view='ok'] svg {
      fill: var(--color-green);
    }
    &:not(.kui--status-stripe-tag-element) {
      &[data-view='warn'],
      &[data-view='loading'],
      &[data-view='info'] {
        filter: grayscale(0.15) brightness(0.9);
        &:hover {
          filter: none;
        }

        &,
        &.kui--status-stripe-element-clickable:hover {
          &[data-view='warn'] {
            background-color: var(--color-yellow);
          }
          &[data-view='info'] {
            background-color: var(--color-base04);
          }
          &[data-view='loading'] {
            font-style: italic;
            background-color: var(--color-base04);
          }
          color: var(--color-base00);
        }
        &.kui--status-stripe-element-clickable:hover {
          filter: none;
        }
      }
    }
    &[data-view='error'] svg {
      fill: var(--color-error);
    }
    &[data-view='hidden'] {
      display: none;
    }
  }

  & > div {
    display: flex;
  }

  .kui--status-stripe-element.kui--status-stripe-element-clickable:hover,
  .kui--status-stripe-button .kui--status-stripe-element:hover {
    &:not(.kui--status-stripe-tag-element) {
      cursor: pointer;
      background-color: $status-stripe-hover-bg-color;
    }
  }

  .kui--status-stripe-tag-element .kui--tag:hover {
    cursor: pointer;
    filter: brightness(1.15); /* TODO */
  }

  .kui--status-stripe-context {
    font-size: $font-size;

    &:first-child {
      border-right: $element-border;
    }
    & + .kui--status-stripe-context .kui--status-stripe-element {
      border-left: none;
    }

    .kui--status-stripe-element {
      padding-left: calc(#{$element-padding} * 0.875 / 0.75);
      padding-right: $element-padding;
    }
    .kui--status-stripe-element-wrapper:not(:first-child),
    .kui--status-stripe-element:not(:first-child) {
      border-left: $element-border;
    }
    .kui--status-stripe-element:not(:first-child):not([data-padding='none']) {
      padding-left: $element-padding;
    }
  }
  .kui--status-stripe-button {
    border-left: $element-border;
  }
  .kui--status-stripe-meter {
    font-size: $font-size;

    & + .kui--status-stripe-meter {
      padding-left: 0;
    }

    .kui--status-stripe-element + .kui--status-stripe-element {
      border-left: none;
    }
    .kui--status-stripe-element {
      border-left: $element-border;
      &:not(:only-child):not(:last-child) {
        border-right: $element-border;
      }

      &.kui--status-stripe-tag-element {
        padding-left: 0;
        border-left: none;
        &:not(:last-child) {
          border-right: none;
        }
      }
    }
  }

  .kui--status-stripe-right {
    justify-content: flex-end;
  }

  @include StatusStripeElement {
    display: flex;
    align-items: center;

    &:not([data-no-padding]) {
      padding: 0 $element-padding;
    }

    @include Dropdown {
      border: none;
      background-color: transparent;
    }
    @include DropdownToggle {
      color: inherit !important;
      font-size: inherit;
    }
    @include DropdownItem {
      font-size: inherit;
    }
  }

  @include StatusStripeElement {
    & > a {
      /* see https://github.com/IBM/kui/issues/3489 */
      display: flex;
      align-items: center;
    }
  }

  .clickable {
    color: currentColor;
    text-decoration: none;
  }

  .kui--status-stripe-element .clickable:hover {
    color: currentColor;
    text-decoration: none;

    & svg {
      stroke: currentColor;
    }
  }

  .kui--status-stripe-button .kui--status-stripe-element,
  .kui--status-stripe-button.kui--status-stripe-element {
    padding: 0 $element-padding;
  }
  @include StatusStripeElement {
    white-space: nowrap;

    &[data-padding='none'] {
      padding: 0;
    }
  }

  .kui--status-stripe-icon {
    display: flex;
    opacity: 0.875;
  }

  .kui--status-stripe-text {
    max-width: 20em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kui--input-stripe {
    @include Block {
      @include InputWrapper {
        border: none;
        background: none;
      }
      @include BlockBorder {
        display: none;
      }
    }

    /* tab completions in status stripe input element */
    .kui--tab-completions {
      bottom: 1.875rem;
      left: 0;
      background-color: var(--color-sidecar-background-01);
      border-bottom: $element-border;
      z-index: 100;

      .kui--tab-completions--option .bx--btn--primary:focus {
        border-radius: 4px 4px 0px 0px;
      }
    }
  }

  @include HideInNarrowWindows;
}

@media (orientation: landscape) and (max-height: 450px) {
  @include StatusStripe {
    display: none;
  }
}
